@import "common.less";

.home{
  width: 100%;font: @font;padding-top: 160/@rem;

  header{
    width: 100%;background-color: #7676CF ;color: #ffffff;position: fixed;top: 0;width: 100%;max-width: @sreen;z-index: 10;
  }

  .topnav{
    padding:25/@rem 10% 10/@rem;overflow: hidden;
    span{float: left;}
    .downbox{text-align: left;width: 33.33%;
      img{display: block;width: 34/@rem;height: 38/@rem;}
    }
    .city{line-height: 48/@rem;text-align: center;font-size: 34/@rem;width: 33.33%;
      b{padding:0 0 0 5/@rem;line-height: 48/@rem;font-size: 10/@rem;font-weight: bold;}
    }
    .search{float: right;padding-top: 10/@rem;
      img{display: block;width: 28/@rem;height: 28/@rem;}
    }
  }
  .navbar{
    width: 100%;overflow: auto;padding: 25/@rem 0 10/@rem 0;
    .navbarcont{
      overflow: hidden;
      .navright{overflow: hidden;
        .rightid{font-size: 24/@rem;line-height: 33/@rem;text-align: center;
          span{display: inline-block;height: 100%;padding-bottom: 20/@rem;}
          .true{border-bottom: 8/@rem solid #ffffff;}
        }
      }
      .true{display: none;}
    }
  }

  .bannerimg-box{background-color: #7676CF;
    .bannerimg{
      padding:0 33/@rem;overflow: hidden;width: 684/@rem;overflow: hidden;
      .banner{
        width:100%;
        .bimg{display: block;width: 684/@rem;height:342/@rem;margin: 0 auto;}
        .bcont{
          width: 100%;text-align: center;margin: 0 auto;padding-top: 13px;color: #fff;
          .name{font-size: 28/@rem;line-height: 40/@rem;}
          .details{font-size: 20/@rem;line-height: 28/@rem;padding-top: 6/@rem;overflow: hidden;
            & > *{display: inline-block;}
            .rili{width: 28/@rem;height: 28/@rem;vertical-align: -4/@rem;}
            .money{margin-left:4%;width: 28/@rem;height: 28/@rem;vertical-align: -6/@rem;}
          }
        }
      }
    }
  }

  .mainpart{
    width:100%;background-color: #ffffff;margin-bottom: 100/@rem;
    .activitypart{
      .title{padding-left: 10%;line-height: 107/@rem;color: #7676CF;font-size: 30/@rem;font-weight: bold;}
        .activtycont{overflow: auto;padding-left: 33/@rem;}
      .activtycontul{overflow: hidden;
        .activity{float: left;width: 300/@rem;height: 300/@rem;position: relative;
          .pic{display: block;width: 100%;height: 100%;}
          .tag{position:absolute;top: 0;right:0;text-align: center;width: 86/@rem;height: 50/@rem;font-size: 24/@rem;line-height: 50/@rem;color: #fff;z-index: 9;
            &.taggreen{background-color: #0aa29a;}
            &.tagblue{background-color: #28a8e2;}
            &.tagred{background-color: #F09082;}
            &.tagyellwo{background-color: #F9B731;}

          }
          .contlayer{position: absolute ;top: 0;left: 0;width: 100%;height: 100%;color:#ffffff;z-index: 5;background-color: rgba(0,0,0,0.3);display: table;
            .box{width: 100%;text-align: center;overflow: hidden;display: table-cell;vertical-align: middle;
              .name{width: 100%;height: 40/@rem;line-height: 40/@rem;font-size:24/@rem;overflow: hidden;font-weight: bold;}
              .time{
                width: 100%;height: 28/@rem;line-height: 24/@rem;padding-top: 2/@rem;text-align: center;
                & > *{display: inline-block;}
                .rili{height: 20/@rem;vertical-align: -2/@rem;}
                span{font-size: 20/@rem;}
              }
            }
          }
        }
      }
    }

    .version{position: fixed;width: 100%;height: 46/@rem;background-color: @color-violet;color: #fff;font-size: 20/@rem;margin-top: 100/@rem;text-align: center;line-height: 46/@rem;bottom: 0;z-index:10;max-width: @sreen;}

  }

  .eventslist{
    width: 100%;overflow: hidden;
    .events{
      width: 100%;height: 380/@rem;position: relative;
      .eventsbgimg{display: block;width: 100%;height:100%;}
      .eventscont{
        width: 100%;height: 394/@rem;position: absolute;top: 0;color: #fff;background-color: rgba(0,0,0,0.3);display: table;
        .cont {
          display: table-cell;vertical-align: middle;
          & > * {
            display: block;
            width: 100%;
            text-align: center;
          }
          .name {
            line-height: 68/@rem;
            font-size: 40/@rem;
          }
          .time {
            line-height: 28/@rem;
            font-size: 20/@rem;
            img {
              display: inline-block;
              width: 20/@rem;
              height: 20/@rem;
              vertical-align: -2/@rem;
            }
          }
          .price {
            line-height: 28/@rem;
            font-size: 20/@rem;
            padding-top: 6/@rem;
            img {
              display: inline-block;
              width: 20/@rem;
              height: 20/@rem;
              vertical-align: -2/@rem;
            }
          }
        }
      }
    }
  }


  .footnav{
    width: 88%;height: 100/@rem;padding: 0 6%;position: fixed;bottom: 0;background-color: #fff;margin-top: 100/@rem;max-width: @sreen;z-index: 10;border-top:1px solid #eee; ;
    & > * {float: left;width: 33.33%;}
    .iconone{text-align: left;
      img{display: block;width: 60/@rem;height: 60/@rem;display: inline-block;padding-top: 12/@rem;}
    }
    .icontwo{text-align: center;
      img{display: block;width: 76/@rem;height: 76/@rem;display: inline-block;padding-top: 6/@rem;}
    }
    .iconthree{text-align: right;
      img{display: block;width: 70/@rem;height: 70/@rem;display: inline-block;padding-top: 8/@rem;}
    }
  }
}



